<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";
const activeKey = ref("1");

const dataSource = ref([
  {
    key: "1",
    name: "Mike",
    size: 32,
    md5: "10",
    releaseDate: "2022-02-24",
  },
]);

const columns = ref([
  {
    title: "文件名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "文件大小",
    dataIndex: "size",
    key: "size",
  },
  {
    title: "MD5值",
    dataIndex: "md5",
    key: "md5",
  },
  {
    title: "发布时间",
    dataIndex: "releaseDate",
    key: "releaseDate",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);

const dataSource2 = ref([
  {
    key: "1",
    name: "...",
    size: 32,
    md5: "10",
    releaseDate: "2022-02-24",
  },
]);

const columns2 = ref([
  {
    title: "文件名",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "文件大小",
    dataIndex: "size",
    key: "size",
  },
  {
    title: "MD5值",
    dataIndex: "md5",
    key: "md5",
  },
  {
    title: "发布时间",
    dataIndex: "releaseDate",
    key: "releaseDate",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
  },
]);


</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="过户服务">
      <div>
        <!-- 
  @click="toApplyPush"
 -->
        <a-button type="primary">
          <router-link to="/product/applyPush">
            申请PUSH
          </router-link>
        </a-button>
        <a-tabs v-model:activeKey="activeKey" animated>
          <a-tab-pane key="1" tab="发送PUSH">
            <a-table :scroll="{ x: 1000, }" :dataSource="dataSource" :columns="columns">
              <template #bodyCell="{ column }">
                <template v-if="column.key === 'operation'">
                  <div class="flex">
                    <a-button type="primary" class="mr-5">修改</a-button>
                    <a-button type="primary" danger>删除</a-button>
                  </div>
                </template>
              </template>
            </a-table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="接收PUSH" force-render>
            <a-table :scroll="{ x: 1000, }" :dataSource="dataSource2" :columns="columns2">
              <template #bodyCell="{ column }">
                <template v-if="column.key === 'operation'">
                  <div class="flex">
                    <a-button type="primary" class="mr-5">修改</a-button>
                    <a-button type="primary" danger>删除</a-button>
                  </div>
                </template>
              </template>
            </a-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped></style>
